<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>证券库存</title>

    <link href="layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/html" id="securityToolBar">
<!--        <div class="layui-btn-container">-->
            <!-- 增加按钮        增加按钮         增加按钮-->
            <button class="layui-btn layui-btn-sm" lay-event="insert" ><i
                    class="layui-icon">&#xe654;</i>新增
            </button>
            <!-- 删除按钮        删除按钮          删除按钮-->
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
            <!--    按条件搜索-->
            <div class="layui-inline layui-show-xs-block" style="margin-left: 200px">
                <label class="layui-form-label" style="width: 110px;text-align: center;">单位成本</label>
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input" autocomplete="off" placeholder="请选择单位成本" name="securityPrice" id="securityPrice">
                </div>
                <!--        表格上方日期-->
                <div class="layui-inline layui-show-xs-block">
                    <label class="layui-form-label" style="width: 110px;text-align: center">业务日期</label>
                    <div class="layui-inline layui-show-xs-block">
                        <input class="layui-input" autocomplete="off" placeholder="请选择统计日期" name="securityInventorsTime" id="securityInventorsTime">
                    </div>
                </div>
                <!--        搜索-->
                <div class="layui-inline layui-show-xs-block">
                    <button class="layui-btn layui-btn-primary" lay-submit="" lay-event="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
            </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'form','laydate'],function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：/docs/modules/table.html#totalRow
        table.render({
            elem: '#security',
            url: '/selectSecurityInventors',
            limits: [5, 8, 10, 15],
            page: true,
            height:'full-20',
            toolbar: '#securityToolBar',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增,
            cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'securityInventorsId', title: '证券库存id', fixed: 'left', unResize: true, sort: true, totalRowText: '合计'}
                , {field: 'securityInventorsTime', title: '统计日期', edit: 'text'}
                , {field: 'fundId', title: '基金编号', edit: 'text'}
                , {field: 'securityId', title: '证券编号', edit: 'text'}
                , {field: 'securityPrice', title: '单位成本', edit: 'text'}
                , {field: 'securityNum', title: '数量', edit: 'text'}
                , {field: 'securityMoney', title: '总金额', edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        });
            laydate.render({
                elem: '#securityInventorsTime'
            });
        table.on('toolbar(security)',function (obj) {
            //根据事件对象 来判定点击的是哪一个案例
            if(obj.event=='insert'){
                layer.open({
                    type:1,
                    area:['1000px','550px'],
                    content: $("#securityContent")
                });
            }else if(obj.event=='search'){
                var securityPrice = $("#securityPrice").val();
                var securityInventorsTime = $("#securityInventorsTime").val();
                table.reload('security', {
                    url: 'selectSecurityInventors',
                    method: 'post'
                    , where: {
                        'securityPrice':securityPrice,
                        'securityInventorsTime':securityInventorsTime
                    }
                });
                laydate.render({
                    elem: '#securityInventorsTime'
                });
            }
        });
        form.on('submit(addsubmit)', function () {
                alert("增加 增加 增加")
                //发送ajax请求到服务器
                //得到表单的所有数据
                var formData = form.val("securityForm");
                alert('formData=' + formData);
                $.post({
                    url: "/insertSecurityInventors",
                    data: formData,
                    function(msg) {
                        if (msg === "yes") {
                            alert("进来了吗？");
                            table.reload('userTable');
                            parent.layer.msg('添加成功', {
                                title: '提示',
                                area: ['200px',
                                    '140px'],
                                time: 5000
                            });
                        } else {
                            layer.msg("增加失败，请重新输入");
                        }
                    }
                    //重新刷新表格
                })
            });
        //给增加的form绑定提交事件
        form.on('submit(securityForm)',function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData= form.val("securityForm");
            $.post(
                "22-22-22",
                formData,
                function(msg) {
                    //重新刷新表格
                    //给予提示信息，增加成功
                    alert(msg);
                });
        });
        /*修改    修改*/
        table.on('tool(security)',function (obj) {
            switch (obj.event) {
                case "edit":
                    //得到选中行的数据
                    var data=obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var userObj=$.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("roleUpdateform",userObj);
                    layer.open({
                        type:1, //iframe 内嵌窗口
                        area:['1000px','550px'],
                        content: $("#editContent")
                    });

                    break;
                case "del":
                    alert("这是删除的操作");
                    var data=obj.data;
                     var userObj=$.parseJSON(JSON.stringify(data));
                    alert(userObj.securityInventorsId);
                    $.ajax({
                        url:"/deleteSecurityInventors",
                        type:"post",
                        data:"securityInventorsId="+userObj.securityInventorsId,
                        dataType:"text",
                        contentType:"application/x-www-form-urlencoded",
                    });
                    window.location.reload();
                    break;
            }
        });

        //给修改的form绑定提交事件
        form.on('submit(roleUpdateform)',function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData= form.val("roleUpdateform");
            $.post(
                "updateSecurityInventors",
                formData,
                function(msg) {
                    //重新刷新表格
                    //给予提示信息，增加成功
                    alert(msg);

                });
        });
        laydate.render({
            elem: '#test20'
        });
            laydate.render({
                elem: '#test30'
                ,theme: '#393D49'
             });

        });

        // //权限下拉列表
        // $.ajax({
        //     url:'/roleInserts',//从后台拿到所有种类
        //     dataType:'json',
        //     //type:'post',
        //     success:function(data){
        //         $.each(data,function(index,item){
        //             console.log(item+index);
        //             console.log(item.username,item.username);
        //             //option 第一个参数是页面显示的值，第二个参数是传递到后台的值
        //             $('#cgId').append(new Option(data[index].roleDesc,data[index].roleDesc));//往下拉菜单里添加元素
        //             $('#cgIdi').append(new Option(data[index].roleName,data[index].roleName));//往下拉菜单里添加元素
        //             //设置value（这个值就可以是在更新的时候后台传递到前台的值）为1的值为默认选中
        //             //$('#cgId').val(1);
        //             $('#cgId').val("--请选择--");
        //         })
        //         form.render(); //更新全部表单内容
        //         //form.render('select'); //刷新表单select选择框渲染
        //     }
        // });




        layui.use(['tableSelect'],function () {
            //加载用到layui组件
            var form = layui.form;
            var $=layui.$;
            var tableSelect = layui.tableSelect;
            //下拉表格 的渲染
            tableSelect.render({
                elem: '#securityId',//渲染表格 与 文本框绑定
                searchKey:'securityId',//后端根据这个名称得到下拉表格中文本框的值
                table: {
                    url: 'select?securityName=',//数据接口
                    cols: [[
                        {type: 'radio'}
                        ,{field:'securityId',title: '证券编号'}
                        ,{field:'securityName',title: '证券名称'}
                        ,{field:'securitType',title: '证券类型'}
                    ]]
                },
                //回调函数
                done: function (elem, data) {
                    var Name='';
                    //遍历选中的数据
                    $.each(data.data,function (index,item) {
                        Name=item.securityId;
                        $("#securityName").val(item.securityName);
                        $("#securityId").val(item.securityId);
                        $("#securitType").val(item.securitType);
                    });
                    elem.val(Name);//给输入框里显示的值赋值
                }
            })
        })

        layui.use(['tableSelect'],function () {
            //加载用到layui组件
            var form = layui.form;
            var $=layui.$;
            var tableSelect = layui.tableSelect;
            //下拉表格 的渲染
            tableSelect.render({
                elem: '#updateSecurityId',//渲染表格 与 文本框绑定
                searchKey:'updateSecurityId',//后端根据这个名称得到下拉表格中文本框的值
                table: {
                    url: 'select?securityName=',//数据接口
                    cols: [[
                        {type: 'radio'}
                        ,{field:'securityId',title: '证券编号'}
                        ,{field:'securityName',title: '证券名称'}
                        ,{field:'securitType',title: '证券类型'}
                    ]]
                },
                //回调函数
                done: function (elem, data) {
                    var Name='';
                    //遍历选中的数据
                    $.each(data.data,function (index,item) {
                        Name=item.securityId;
                        $("#updateSecurityId").val(item.securityId);
                        $("#updateSecurityName").val(item.securityName);
                        $("#updateSecuritType").val(item.securitType);
                    });
                    elem.val(Name);//给输入框里显示的值赋值
                }
            })
        })

    </script>

</head>

<body>

    <table id="security" lay-filter="security"></table>
<!-- 给表单右测增加超链接-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑</a>
    <button  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</button>
</div>
<!--增加的窗口-->
<div id="securityContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="securityForm" lay-filter="securityForm"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
       <!-- <div class="layui-form-item" style="text-align: center;">
            &lt;!&ndash;标签&ndash;&gt;
            <label class="layui-form-label">证券库存id</label>
            <div class="layui-input-inline">
                <input type="text" name="securityInventorsId" lay-verify="required"
                       autocomplete="off" placeholder="证券库存id" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">统计日期</label>
            <div class="layui-input-inline">
                <input type="date" name="securityInventorsTime" lay-verify="required"
                       autocomplete="off" placeholder="统计日期" class="layui-input">
            </div>
        </div>


        <!--<div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金编号</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="基金编号 " class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号</label>
            <div class="layui-input-inline">
                <input type="text" id="securityId" name="securityId" lay-verify="required"
                       autocomplete="off" placeholder="证券编号 " class="layui-input">
                <input type="hidden" id="securityName" >
                <input type="hidden" id="securitType" >
            </div>
        </div>


        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">单位成本</label>
            <div class="layui-input-inline">
                <input type="number" name="securityPrice" lay-verify="required"
                       autocomplete="off" placeholder="单位成本 " class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="number" name="securityNum" lay-verify="required"
                       autocomplete="off" placeholder="数量" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-inline">
                <input type="number" name="securityMoney" lay-verify="required"
                       autocomplete="off" placeholder="总金额" class="layui-input">
            </div>
        </div>

        <div style="position: relative; bottom: 0;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>


<!----------------------------------------------------------------------修改窗口-->
<div id="editContent"
     style="display: none; height: 100%; width: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="roleUpdateform" lay-filter="roleUpdateform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <!--标签-->
            <label class="layui-form-label">证券库存id</label>
            <div class="layui-input-inline">
                <!--输入框  lay-verify =“required” 必填-->
                <input type="text" name="securityInventorsId" lay-verify="required"
                       readonly  autocomplete="off" placeholder="请输入证券库存id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">统计日期</label>
            <div class="layui-input-inline">
                <input type="date" name="securityInventorsTime" lay-verify="required"
                       autocomplete="off" placeholder="请输入 统计日期:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金编号:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="securityId" id="updateSecurityId" lay-verify="required"
                       autocomplete="off" placeholder="请输入证券编号:" class="layui-input">
                <input type="hidden" id="updateSecurityName">
                <input type="hidden" id="updateSecuritType">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">单位成本：</label>
            <div class="layui-input-inline">
                <input type="number" name="securityPrice" lay-verify="required"
                       autocomplete="off" placeholder="请输入单位成本:" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline">
                <input type="number" name="securityNum" lay-verify="required"
                       autocomplete="off" placeholder="请输入数量:" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额：</label>
            <div class="layui-input-inline">
                <input type="number" name="securityMoney" lay-verify="required"
                       autocomplete="off" placeholder="请输入总金额:" class="layui-input">

            </div>
        </div>
        <div style="position: absolute; bottom: 30px; left: 45%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="udateSubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
</body>
</html>